<template>
<div>
  <div class="containers">
    <div class="body">
      <div class="telNumber">
        <img src="../assets/img/mobile.png" alt="">
        <input type="number" placeholder="请输入您的手机号" v-model="phone" @blur="checkphone" @input="input">
      </div>
      <div class="telNumber">
        <img src="../assets/img/key.png" alt="" style="width: 3.5vw;">
        <input type="number" placeholder="请输入验证码" style="left: 1.5vw;" v-model="code" @input="input1">
        <div class="getcode"  v-show="show" @click="getCode">
          获取验证码
        </div>
        <div v-show="!show" class="getcode" >{{count}}s</div>
      </div>
      <p class="agree">登陆即代表同意
        <a href="https://super.napin.com/index/goods/article?article_id=13">
        <span>《纳品网服务条款》</span>
        </a>
      </p>

    </div>
    <div class="login" align="center" @click="getLogin">登陆</div>
  </div>
</div>
</template>

<script>
import request from "@/request/index.js"
    export default {
        name: "login",
      data(){
          return{
            show:true,
            count:'',
            phone:'',
            code:'',
            openid:0,
            unionid:0,
          }
      },
      methods:{
        checkphone(){
          const regphone = new RegExp(/^1[0123456789]\d{9}$/);
          if(!regphone.test(this.phone.trim())){
            this.$toast('请输入正确的手机号码格式')
          }
        },
        input(){
          if(this.phone.length>11){
            this.phone=this.phone.slice(0,11);
          }
        },
        input1(){
          if(this.code.length>6){
            this.code=this.code.slice(0,6);
          }
        },
        getCode(){
          const regphone = new RegExp(/^1[0123456789]\d{9}$/);
          if (regphone.test(this.phone.trim())){
            const TIME_COUNT = 60;
            request.getCode(this);
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
              var that=this;
              const phone = $("#phone").val();
             //接口
            }
            }else{
            this.$toast('请输入正确的手机号码格式')
          }
        },
        getLogin(){
          request.getLogin(this);
        },
      },

      mounted () {
        
        if(localStorage.getItem('openid')){
          this.openid=localStorage.getItem('openid');
        }
        if(localStorage.getItem('unionid')){
          this.unionid=localStorage.getItem('unionid');
        }
        localStorage.clear();
        if(this.openid!=0){
          localStorage.setItem('openid',this.openid)
        }
        if(this.unionid!=0){
          localStorage.setItem('unionid',this.unionid)
        }
        request.getWXcode(this);

      }
    }
</script>

<style scoped lang="scss">
.containers{
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  padding-top: 3.3vw;
  .login{
    width: 72vw;
    height: 10.67vw;
    margin: 0px auto;
    margin-top: 11vw;
    text-align: center;
    background-color: #ff4c50;
    color: #fff;
    line-height: 10.67vw;
    font-size: 16px;
    border-radius: 6vw;
  }
    .body{
      width: 100vw;
      height: 26.67vw;
      background: #fff;

      .agree{
        float: left;
        font-size: 11px;
        text-indent: 4vw;
          span{
            color: #ff4c50;
          }
      }
        .telNumber{
          width: 100vw;
          height: 13.33vw;
          border-bottom: 1px solid #f5f5f5;
          .getcode{
            width: 26.67vw;
            height: 8vw;
            background: #ff4c50;
            border-radius: 4vw;
            color: #fff;
            float: right;
            font-size: 15px;
            line-height: 8vw;
            text-align: center;
            margin-top: 2vw;
            margin-right: 5vw;
          }
          input{
            width:51vw;
            height: 10vw;
            margin-left: 4.3vw;
            position: relative;
            top: -1.5vw;
            font-size: 14px;
          }
          img{
            width: 5vw;
            height: 5.3vw;
            margin-top: 4vw;
            margin-left: 6vw;
          }
        }
    }
}
</style>
